<template>
    <div class="users">
       <div class="top">
            <el-input style="width:400px" placeholder="请输入内容" v-model="page.query" class="input-with-select">
               <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
            </el-input>
            <el-button type="primary" @click="add"> 添加用户</el-button>
       </div>
       <!-- 表格 -->
       <my-table :Data="Data" :tableData="tableData" :total="total" :page="page" @handleSizeChange="handleSizeChange"  @handleCurrentChange="handleCurrentChange">
        <template v-slot:state="{row}">
              <el-switch
                   v-model="row.mg_state"
                   @change="install(row)"
                  active-color="#409eff"
                  inactive-color="#ff4949">
               </el-switch>
        </template>

        <template v-slot:action="{row,index}">
           <el-button type="primary" icon="el-icon-edit"  size="mini" @click="edit(row)" ></el-button>
          <el-button type="danger" icon="el-icon-delete"  size="mini" @click="del(row)"></el-button>
         <el-button type="warning" icon="el-icon-star-off"  size="mini" @click="orders(row)"></el-button>
        </template>
       </my-table>
     <!-- 弹出框 -->
     <el-dialog :title="title" :visible.sync="dialogFormVisible">
         <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
           <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username" :disabled="adtypeShow?false:true" ></el-input>
           </el-form-item>
            <el-form-item label="密码" prop="password" v-show="adtypeShow==true" >
            <el-input v-model="ruleForm.password"></el-input>
           </el-form-item>
            <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email"></el-input>
           </el-form-item>
            <el-form-item label="手机" prop="mobile">
            <el-input v-model="ruleForm.mobile"></el-input>
           </el-form-item>
        </el-form>
    
        <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisible = false">取 消</el-button>
         <el-button type="primary" @click="adds">确 定</el-button>
       </div>
    </el-dialog>

    <!-- 角色弹出框 -->
    <el-dialog title="分配角色" :visible.sync="dialogRoleVisible">
      <div>当前用户名: {{ rolesform.username }}</div>
      <div>当前角色名: {{ rolesform.role_name }}</div>
      <div>
        分配新角色:
        <el-select
          v-model="rolesform.roles"
          slot="prepend"
          placeholder="请选择"
        >
          <el-option
            v-for="item in option"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
        <div class="dq">
          <el-button @click="dialogRoleVisible=false">取消</el-button>
          <el-button type="primary" @click="dialogRoleVisible = false">确定</el-button>
        </div>
      </div>
    </el-dialog>
    </div>
</template>
<script>
import {
  getuserList,
  getUser,
  deleteUser,
  changeStatus,
  updateUser,
  searchUser
} from "@/utils/api";

import { getRoles } from "@/utils/RolePermissions";
// import MyTable from "@/components/table/MyTable";
export default {
    // components:{
    //     MyTable
    // },
  data() {
    return {
        Data:[
            {
                type:"index",
                title:"#",
            },
            {
                title:"用户名",
                name:"username"
            },
            {
                title:"邮箱",
                name:"email"
            },
            {
                title:"电话",
                name:"mobile"
            },
            {
              title:"角色",
              name:"role_name"
            },
            {
                slot:"state",
                title:"状态"
            },
            {
                slot:"action",
                title:"操作"
            }
        ],
      input3: "",
      tableData: [],
      total: 10,
      page: {
        query: "",
        pagenum: 1,
        pagesize: 10
      },
      option: ["111", "456", "3333", "789", "12555"],
      etid: 0,
      adtypeShow: true,
      title: "添加用户",
      dialogRoleVisible: false,
      Form: {
        role_name: ""
      },
      dialogFormVisible: false,
      ruleForm: {
        username: "",
        password: "",
        email: "",
        mobile: ""
      },
      rolesform: {
        roles: "", //分配权限
        username: "", //姓名
        role_name: "" //身份
      },
      rules: {
        username: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 6, message: "长度在 6 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 8个字符", trigger: "blur" }
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        mobile: [
          { required: true, message: "手机号", trigger: "blur" },
          { min: 11, max: 11, message: "长度在11 个字符", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getdata();
  },
  methods: {
    getdata() {
      getuserList(this.page).then(res => {
        // console.log(res)
        this.tableData = res.data.data.users;
        this.total = res.data.data.total;
      });
    },
    //  分页
    handleSizeChange(val) {
      this.page.pagesize = val;
      this.getdata();
      console.log(`每页 ${val} 条`);
    },

    handleCurrentChange(val) {
      this.page.pagenum = val;
      this.getdata();
      console.log(`当前页: ${val}`);
    },
    // 点击添加用户
    add() {
      this.dialogFormVisible = true;
      this.title = "添加用户";
      this.adtypeShow = true;
    },
    // 确定添加
    adds() {
      console.log(this.adtypeShow);
      if (this.adtypeShow == true) {
        getUser(this.ruleForm).then(res => {
          console.log(res);
          if (res.data.meta.status == 201) {
            this.$message.success(res.data.meta.msg);

            this.dialogVisible = false;
            this.getdata();
          }
        });
      } else {
        let obj = {
          id: this.etid,
          email: this.ruleForm.email,
          mobile: this.ruleForm.mobile
        };

        updateUser(obj).then(res => {
          console.log(res);
          if (res.data.meta.status == 201) {
            this.$message.success(res.data.meta.msg);
            this.dialogVisible = false;
          }
          this.getdata();
        });
        this.adtypeShow = true;
      }
      (this.ruleForm = {
        username: "",
        password: "",
        email: "",
        mobile: ""
      }),
        (this.dialogFormVisible = false);
    },
    //   删除
    del(row) {
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteUser(row.id).then(res => {
            if (res.data.meta.status == 200) {
              this.$message({
                type: "success", // success error warning
                message: res.data.meta.msg
              });
              this.getdata();
            }
          });
        })
        .catch(() => {
          console.log("取消删除");
        });
    },
    // 切换状态
    install(row) {
      console.log(row);
      let uId = row.id;
      let type = row.mg_state;
      changeStatus(uId, type).then(res => {
        console.log(res);
        if (res.data.meta.status == 200) {
          this.$message({
            type: "success", // success error warning
            message: res.data.meta.msg
          });
          this.getdata();
        }
      });
    },
    // 搜索
    search() {
      this.getdata();
    },
    // 编辑 数据回填
    edit(row) {
      this.etid = row.id;
      this.title = "编辑用户";
      this.ruleForm = { ...row };
      (this.adtypeShow = false), console.log(this.adtypeShow);
      (this.dialogFormVisible = true), console.log(row);
    },
    // 角色
    orders(row) {
      this.dialogRoleVisible = true;
      console.log(row);
      this.rolesform = { ...row };
      this.id = row.id;
    }
  }
};
</script>
<style lang="scss" scoped>
.users {
  margin-top: 20px;
  width: 100%;
  background-color: #fff;
  border-radius: 5px;
  padding: 15px;
  box-sizing: border-box;
}
</style>


